<template>
  <div id="box">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#33aef0"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path" @click="clickMenu(item)">
        <i :class="'el-icon-'+item.icon"></i>
        <span slot="title">{{item.lable}}</span>
      </el-menu-item>

      <el-submenu index="1" v-for="(item,index) in hasChildren" :key="index">
        <template slot="title">
          <i :class="'el-icon-'+item.icon"></i>
          <span>{{item.path}}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item 
            :index="subItem.path" 
            v-for="(subItem,subIndex) in item.children" 
            :key="subIndex"
            @click="clickMenu(subItem)"
          > 
            {{subItem.lable}}
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>


    </el-menu>
  </div>
</template>

<script>
export default {
    data(){
        return {
            asideMent:[
                {
                    path:"/",
                    lable:"首页",
                    icon:"home"
                },
                {
                    path:"/video",
                    lable:"视频管理",
                    icon:"video-play"
                },
                {
                    path:"/user",
                    lable:"用户管理",
                    icon:"user"
                },
                {
                    path:"其他页面",
                    icon:"user",
                    children:[
                        {
                            path:"/page1",
                            lable:"页面1",
                            icon:"setting"
                        },
                        {
                            path:"/page2",
                            lable:"页面2",
                            icon:"setting"
                        }
                    ]
                }
            ]
        }
    },
    computed:{
        //没有子集的·数组
        noChildren(){
            return this.asideMent.filter(item => !item.children);
        },
        //有子集的数组
        hasChildren(){
            return this.asideMent.filter(item => item.children);
        }
    },
    methods:{
        clickMenu(item){
            this.$store.commit('selectMenu',item)
        }
    }

}
</script>

<style lang="scss" scoped>
    #box{
        height: 100%;
    }
    .el-menu{
        border-right:none !important;
        height: 100%;
    }
</style>